<template>
	<view class="container">
		<view class="titleTop">
			<view class="text"> 基于速度的力量训练 </view>
			<img class="line" src="../../pagesTool/static/line2.png" mode="widthFix"></img>
		</view>
		<!-- 训练方式 -->
		<view class="train_way" v-if="current === 0">
			<view class="big_header">
				请选择训练方式
			</view>
			<view v-for="item in train_way" :key="item.title" @click="check(item.title)" class="module"
				style="align-items: center; " :style="{
			    display: 'flex',
			    border: item.border,
			    background: item.background
			  }">
				<view class="" style="height: 90rpx; display: flex; align-items: center; ">
					<view class="" style="height: 90rpx; width: 90rpx; margin: auto 36rpx; ">
						<img class="img" :src="item.img" alt="" style="" :style="{
						  width: item.width,
						  height: item.height
						}" />
					</view>

					<view class="" style=" margin-right: 22rpx; ">
						<view class="title">
							{{item.title}}
						</view>
						<view class="content">
							{{item.content}}
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 训练目的 -->
		<view class="train_way" v-if="current === 1">
			<view class="big_header">
				请选择训练目的
			</view>
			<view v-for="item in train_aim" :key="item.title" @click="check(item.title)" class="module"
				style=" align-items: center; " :style="{
			    display: 'flex',
			    
			    background: item.background
			  }">
				<view class="" style="height: 90rpx; display: flex; align-items: center; ">
					<view class=""
						style="display: flex; align-items: center;  height: 90rpx; width: 90rpx; margin: auto 36rpx; ">
						<img class="img" :src="item.img" alt="" style="" :style="{
						  width: item.width,
						  height: item.height
						}" />
					</view>

					<view class="" style=" margin-right: 22rpx; ">
						<view class="title">
							{{item.title}}
						</view>
						<view class="content">
							{{item.content}}
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 训练动作 -->
		<view class="train_way" v-if="current === 2">
			<view class="big_header">
				请选择训练动作
			</view>
			<view class="actionSelectRow" style="margin-left: 30rpx; margin-right: 30rpx;">
				<view class="actionItem" v-for="(item,index) in actionsArr" :key="item"
					@click="handleSelectAction(index)">
					<view class="" style="height: 95rpx ;  display: flex;">
						<view class=""
							style="display: flex; background: 'transparent';  align-items: center; height: 95rpx ; width: 100rpx; ">
							<img :src="item.icon" :style="{
							  width: item.width,
							  height: item.height,
							  background: 'transparent'
							}" style="opacity: 0.6; background: transparent;" alt="" />
						</view>
						<view class="right" style="">
							<view class="title" style="margin-bottom: 10rpx;">
								{{ item.title }}
							</view>
							<view class="content">
								{{ item.content }}
							</view>
							<view class="content">
								{{ item.content2 }}
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import VueEvent from '../../VueEvent'
	export default {
		data() {
			return {
				current: 0,
				
				showTrainAim: false,
				selectedWay: '',
				selectedAim: '',
				train_way: [{
						'title': '针对性训练',
						'content': '根据您的训练部位和训练目的为您定制训练细节',
						'img': '/static/vbt/1.png',
						'border': '1px solid rgba(110, 88, 170, 1)',
						'background': 'rgba(110, 88, 170, 0.05)',
						'height': '90rpx',
						'width': '100rpx'
					},
					{
						'title': '自由训练',
						'content': '不定制训练细节，非专业人士不建议使用',
						'img': '/static/vbt/2.png',
						'border': '1px solid rgba(124, 124, 126, 0.6)',
						'background': 'rgba(255, 255, 255, 0.8)',
						'height': '90rpx',
						'width': '90rpx'
					},
				],
				train_aim: [{
						'title': '提升爆发力',
						'content': '快速提升运动表现，增强瞬间爆发力',
						'img': '/static/vbt/3.png',
						'border': '1px solid rgba(124, 124, 126, 0.6)',
						'background': 'rgba(255, 255, 255, 0.8)',
						
						'height': '90rpx',
						'width': '90rpx'
					},
					{
						'title': '增肌塑形',
						'content': '科学增肌方案，打造完美线条',
						'img': '/static/vbt/4.png',
						'border': '1px solid rgba(124, 124, 126, 0.6)',
						'background': 'rgba(255, 255, 255, 0.8)',
						'height': '90rpx',
						'width': '90rpx'
					},
					{
						'title': '增强力量',
						'content': '突破力量极限，增强耐力型肌肉',
						'img': '/static/vbt/5.png',
						'border': '1px solid rgba(124, 124, 126, 0.6)',
						'background': 'rgba(255, 255, 255, 0.8)',
						'height': '60rpx',
						'width': '90rpx'
					},
					{
						'title': '提高耐力',
						'content': '突破力量极限，增强耐力型肌肉',
						'img': 'https://img.js.design/assets/img/6834654fd3edcee12ac53516.png#fba695c4441e6a91a10c40ca99c4c052',
						'border': '1px solid rgba(124, 124, 126, 0.6)',
						'background': 'rgba(255, 255, 255, 0.8)',
						'height': '100rpx',
						'width': '90rpx'
					}
				],
				actionsArr: [{
					title: '深蹲',
					content: '锻炼下肢力量的基础动作',
					content2: '股四头肌、臀肌',
					icon: 'http://182.92.108.71:9001/image/trainmotion/1.jpeg',
					height: '95rpx',
					width: '100rpx'
				}, {
					title: '卧推',
					content: '增强上肢推力的经典动作',
					content2: '胸大肌、三头肌',
					icon: 'https://img.js.design/assets/img/67fc7330e226cb2a1d08dd8f.jpeg#320b7f9d3028f355d04954cbfb215f47',
					height: '130rpx',
					width: '100rpx'
				}, {
					title: '硬拉',
					content: '全身性力量训练动作',
					content2: '背阔肌、臀腿',
					icon: 'http://182.92.108.71:9001/image/trainmotion/3.jpeg',
					'height': '80rpx',
					'width': '70rpx'
				}, {
					title: '俯身划船',
					content: '强化背部的基础动作',
					content2: '背阔肌、斜方肌',
					icon: 'http://182.92.108.71:9001/image/trainmotion/4.png',
					'height': '90rpx',
					'width': '100rpx'
				}, {
					title: '高翻',
					content: '爆发力训练动作',
					content2: '全身性动作',
					icon: 'http://182.92.108.71:9001/image/trainmotion/5.jpeg',
					'height': '100rpx',
					'width': '250rpx'
				}, {
					title: '站姿推肩',
					content: '肩部力量发展动作',
					content2: '三角肌、斜方肌',
					icon: 'http://182.92.108.71:9001/image/trainmotion/6.jpeg',
					'height': '90rpx',
					'width': '100rpx'
				},  {
					title: '高位下拉',
					content: '强化背部的基础动作',
					content2: '背阔肌、斜方肌',
					icon: 'http://182.92.108.71:9001/image/trainmotion/7.jpeg',
					'height': '90rpx',
					'width': '150rpx'
				},{
					title: '坐姿推肩',
					content: '肩部力量发展动作',
					content2: '三角肌、斜方肌',
					icon: 'http://182.92.108.71:9001/image/trainmotion/8.png',
					'height': '100rpx',
					'width': '100rpx'
				},{
					title: '罗马尼亚硬拉',
					content: '肩部力量发展动作',
					content2: '三角肌、斜方肌',
					icon: 'http://182.92.108.71:9001/image/trainmotion/9.png',
					'height': '100rpx',
					'width': '100rpx'
				},{
					title: '直腿硬拉',
					content: '肩部力量发展动作',
					content2: '三角肌、斜方肌',
					icon: 'http://182.92.108.71:9001/image/trainmotion/10.png',
					'height': '100rpx',
					'width': '100rpx'
				}],
			}
		},
		onShow() {
			// 重置页面状态
			this.current = 0;
			this.showTrainAim = false;
			this.selectedWay = '';
			this.selectedAim = '';
		},
		methods: {
			check(title) {
				if (title == "针对性训练") {
					this.selectedWay = '针对性训练';
					this.showTrainAim = true;
					this.current = 1; // 自动前进到训练目的
				} else if (title == "自由训练") {
					this.selectedWay = '自由训练';
					this.showTrainAim = false;
					this.current = 2; // 自由训练直接跳到训练动作
				} else if (title == "提升爆发力" || title == "增肌塑形" || title == "增强力量"|| title == "提高耐力") {
					this.selectedAim = title;
					this.current = 2; // 自动前进到训练动作
					if (title == "提升爆发力") {
						VueEvent.add_aim(0);
					} else if (title == "增肌塑形") {
						VueEvent.add_aim(1);
					} else if (title == "增强力量") {
						VueEvent.add_aim(2);
					} else if (title == "提高耐力") {
						VueEvent.add_aim(3);
					} 
				}
			},
			handleSelectAction(index) {
				console.log("选择的动作序号是",index)
				VueEvent.add_action(index);
				this.govbt();
			},
			govbt() {
				uni.navigateTo({
					url: `/pagesExtra/login/login?trainWay=${this.selectedWay}&isFree=${this.selectedWay === '自由训练'}`

				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		font-family: "优设标题黑";
		// background-color: rgba(110, 88, 170, 0.02);
		background: rgba(124, 124, 126, 0.10);
		height: 100vh;

		.titleTop {
			margin-top: 18rpx;
			margin-left: 30rpx;

			.text {
				font-size: 20px;
				background-image: linear-gradient(to right, #6e58aa, #f17071);
				-webkit-background-clip: text;
				color: transparent;
				width: fit-content;
				margin-bottom: -10px;
			}

			.line {
				width: 100rpx;
			}
		}

		.train_way {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-top: -100rpx;

			.img {
				width: 100rpx;
				height: 90rpx;
			}

			.big_header {
				font-size: 40rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 52rpx;
				color: rgba(110, 88, 170, 1);
				text-align: center;
				margin-bottom: 60rpx;
			}

			.module {
				font-family: "Alibaba PuHuiTi 2.0";
				width: 606rpx;
				height: 188rpx;
				border-radius: 31rpx;
				background: rgba(110, 88, 170, 0.05);
				margin: 30rpx auto;

				.title {
					margin-bottom: 14rpx;
					text-align: left;
					font-size: 32rpx;
					font-weight: 500;
					letter-spacing: 0px;
					line-height: 43rpx;
					color: rgba(110, 88, 170, 1);
				}

				.content {
					font-size: 20rpx;
					font-weight: 500;
					letter-spacing: 0px;
					line-height: 27rpx;
					color: rgba(124, 124, 126, 1);
				}
			}

			.actionSelectRow {
				display: grid;
				grid-template-columns: 1fr 1fr;
				row-gap: 60rpx;
				column-gap: 20rpx;


				.actionItem {
					background-color: rgba(110, 88, 170, 0.12);
					display: flex;
					border-radius: 20rpx;
					padding: 20rpx 15rpx;
					align-items: center;

					image {
						width: 100rpx;
						height: 100rpx;
						margin-right: 20rpx;
						// border: 1px solid black;
					}

					.right {
						.title {
							font-size: 32rpx;
							font-weight: 500;
						}

						.content {
							font-size: 18rpx;
							font-weight: 400;
							color: rgba(124, 124, 126, 1);
						}
					}
				}
			}
		}

		.actionSelectRow .actionItem img {
			background: transparent !important;
		}
	}
</style>